<template>
  <page-header-wrapper>
    <!-- PageHeader 第二种使用方式 (v-slot) -->
    <template v-slot:content>
    
    </template>
    <a-card
      :bordered='false'>
      <a-steps
        class='steps'
        :current='currentTab'>
        <a-step title='填写题目信息' />
        <a-step title='确认题目信息' />
        <a-step title='完成' />
      </a-steps>
      <div class='content'>
        <!--缓存分步组件-->
        <keep-alive>
          <step1
            v-if='currentTab === 0'
            @nextStep='nextStep' />
          
          <step2
            :form-data='this.topicForm'
            v-if='currentTab === 1'
            @nextStep='nextStep'
            @prevStep='prevStep' />
          
          <step3
            v-if='currentTab === 2'
            @prevStep='prevStep'
            @finish='finish' />
        </keep-alive>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'

export default {
  name: 'StepForm',
  components: {
    Step1,
    Step2,
    Step3
  },
  data() {
    return {
      currentTab: 0,
      // 题目信息表单
      topicForm: null
    }
  },
  methods: {
    
    // 下一步
    nextStep(values) {
      this.topicForm = values
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
    },
    // 上一步
    prevStep() {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    // 完成填写后重置表单
    finish() {
      
      this.topicForm = null
      this.currentTab = 0
    }
  }
}
</script>

<style lang='less' scoped>
.steps {
  max-width: 750px;
  margin: 16px auto;
}
</style>
